<template>
    <div style="background: #ECECEC; height: 100%">
        <div style="background:#ECECEC; padding:10px">
            <a-card title="基本组件" :bordered="false" class="component-card">
                <draggable
                        tag="div"
                        class="van-row"
                        :list="Object.values(basicComponents)"
                        v-bind="{group:{ name: 'label-components', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                        :clone="selectedLabel"
                >
                        <van-col span="7" offset="1"  class="component-button-container"  style="margin-bottom: 16px" v-for="(item, index) in Object.values(basicComponents)" :key="index" >
                            <van-button block :icon="item.label.icon" size="small" type="default"
                            > {{ item.label.name }} </van-button>
                        </van-col>
                </draggable>
            </a-card>
        </div>
        <div v-if="hasFormComponent" style="background:#ECECEC; padding:10px">
            <a-card title="表单组件" :bordered="false" class="component-card">
                    <draggable
                            tag="div"
                            class="van-row"
                            :list="FormLabels"
                            v-bind="{group:{ name: 'form-components', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                            :clone="selectedLabel"
                    >
                        <van-col span="7" offset="1" class="component-button-container" style="margin-bottom: 16px" v-for="(item, index) in FormLabels" :key="index" >
                            <van-button block :icon="item.label.icon" size="small" type="default"
                            > {{ item.label.name }} </van-button>
                        </van-col>
                    </draggable>
            </a-card>
        </div>
    </div>
</template>

<style>

</style>

<script>
    import Draggable from 'vuedraggable'
    import Vue from 'vue'
    import { basicComponents } from "../components/basicComponents";
    import FormLabels from "../components/basic/form/components"
    import { name as FormName } from '../components/basic/form/data'

    Object.getOwnPropertyNames(basicComponents).forEach(function (name) {
        const component = basicComponents[name];
        Vue.component(component.preview.type, () => component.preview.component)
        Vue.component(component.config.type, () => component.config.component)
    });
    FormLabels.forEach(function (component) {
        Vue.component(component.preview.type, () => component.preview.component)
        Vue.component(component.config.type, () => component.config.component)
    });
    const container = {
        components: {
            Draggable,
        },
        methods: {
            selectedLabel(item) {
                const config = { type: item.config.type };
                const data = this.$deepCopy(item.data);
                data.id = item.name + "_" + Date.now();
                return {
                    name  : item.name,
                    config: config,
                    render: { type : item.render.type },
                    preview: { type:  item.preview.type },
                    data: data
                }
            }
        },
        data() {
            return {
                basicComponents,
                FormLabels
            }
        },
        computed: {
            hasFormComponent() {
                for (let i in this.$store.state.pageHtmlElements){
                    if (this.$store.state.pageHtmlElements[i].name === FormName){
                        return true
                    }
                }
                return false
            }
        }
    };
    export default container
</script>